<template>
	<div class="details-container game-container">
		<div class="head">
			<p class="title">注单详情</p>
			<p class="right-btn">
				<el-button @click="goBack">返回</el-button>
			</p>
		</div>
		<div class="detail-wrapper">
			<div class="detail-content">
				<div class="account-info-wrapper">
					<div class="block-title">投注人信息</div>
					<el-row class="block-content">
						<el-col :span="6">
							账号类型：
							{{
								typeFilter(dataList.accountType, 'accountType')
							}}
						</el-col>
						<el-col :span="6">
							会员账号： {{ dataList.memberName || '-' }}
						</el-col>
						<el-col :span="6">
							上级代理：{{ dataList.parentProxyName || '-' }}
						</el-col>
						<el-col :span="6">
							VIP等级： {{ dataList.vipSerialNum || '-' }}级
						</el-col>
						<el-col :span="6">
							游戏账号： {{ dataList.playerName || '-' }}
						</el-col>
						<el-col :span="6">
							账号状态：
							<span
								v-if="dataList.loginLockStatus === 1"
								class="disableRgba"
							>
								{{ $t('common.login_lock_status') }}
							</span>
							<span
								v-if="dataList.gameLockStatus === 1"
								class="lockingRgba"
							>
								游戏锁定
							</span>
							<span
								v-if="dataList.accountLockStatus === 1"
								class="deleteRgba"
							>
								{{ $t('common.account_lock_status') }}
							</span>
							<span
								v-if="
									dataList.loginLockStatus === 0 &&
										dataList.gameLockStatus === 0 &&
										dataList.accountLockStatus === 0
								"
								class="normalRgba"
							>
								{{ $t('common.account_status_normal') }}
							</span>
						</el-col>
						<el-col :span="6">
							该类游戏总输赢：
							{{
								dataList.totalNetAmount !== null
									? decimalToFixed(dataList.totalNetAmount)
									: '-'
							}}
						</el-col>
						<el-col :span="6">
							总代账号：
							{{ dataList.proxyName || '-' }}
						</el-col>
					</el-row>
					<el-divider></el-divider>
				</div>
				<component
					:is="getComponentName()"
					:data-list="dataList"
					:game-type="gameType"
				></component>
			</div>
		</div>
	</div>
</template>

<script>
import RealDetails from './RealDetails'
import ChessDetails from './ChessDetails'
import SportDetails from './SportDetails'
import ESportDetails from './ESportDetails'
import LotteryDetails from './LotteryDetails'
import EGameDetails from './EGameDetails'
import FishingDetails from './FishingDetails'
import list from '@/mixins/list'
export default {
	components: {
		RealDetails,
		ChessDetails,
		SportDetails,
		ESportDetails,
		LotteryDetails,
		EGameDetails,
		FishingDetails
	},
	mixins: [list],
	props: {
		rowData: {
			type: Object,
			default: () => {}
		},
		gameType: {
			type: String,
			default: () => ''
		}
	},
	data() {
		return {
			dataList: {},
			componentList: [
				{ code: 'zr', name: 'RealDetails' },
				{ code: 'qp', name: 'ChessDetails' },
				{ code: 'ty', name: 'SportDetails' },
				{ code: 'dj', name: 'ESportDetails' },
				{ code: 'cp', name: 'LotteryDetails' },
				{ code: 'dy', name: 'EGameDetails' },
				{ code: 'by', name: 'FishingDetails' }
			]
		}
	},
	mounted() {
		const dom = document.documentElement || document.body
		dom.scrollTop = 0
		this.gatDetails()
	},
	methods: {
		goBack() {
			this.$emit('go-back')
		},
		getRowStyle() {
			return `color: #ffff;background: #000;border: 1px solid #000;`
		},
		getComponentName() {
			return this.componentList.find(
				(item) => item.code === this.rowData.gameCode
			)?.name
		},
		gatDetails() {
			this.$api
				.eatTakeCommissionRecordDetail({
					createAt: this.rowData.createAt,
					gameCode: this.rowData.gameCode,
					thirdOrderId: this.rowData.thirdOrderId
				})
				.then((res) => {
					this.dataList = res.data.record[0] || {}
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.details-container {
	min-height: 800px;
	.head {
		height: 70px;
		line-height: 70px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		display: flex;
		justify-content: space-between;
		padding: 0 30px;
		.title {
			font-weight: 600;
			font-size: 16px;
			color: rgb(192, 190, 190);
		}
		.right-btn {
			float: right;
		}
	}
	.detail-wrapper {
		border: 1px solid rgba(192, 190, 190, 0.5);
	}
	.detail-content {
		line-height: 30px;
		padding: 20px 20px 35px;
	}
	::v-deep .block-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	::v-deep .block-content {
		padding: 0 20px;
	}
}
</style>
